<template>
    <div id="recruiting">
        <div id="r-container">
            <div class="r-head">
                <a :class="{rheadactive:tabIndex == 0}"
                @click="tabPosition(null,0)">全部({{tabList.length}})</a>
                <a v-for="(tab,index) in tabList" :key="tab" @click="tabPosition(tab.positionId,index+1)"
                :class="{rheadactive:tabIndex == index+1}">
                    {{tab.positionName}}({{tab.count}})
                </a>
            </div>
            <div id="r-list">
                <div v-for="(i,index) in jobList" :key="i" class="job-boxs">
                    <div class="check-ewm-box">
                        <div class="check-ewm" :class="{hide:ewmindex != index}">
                            <img src="../../assets/companyDetail/正三角形.png" alt="">
                            <div class="ewm">
                                <img src="../../assets/code.png" alt="" style="width: 124px;">
                            </div>
                        </div>
                    </div>
                    <div class="inline">
                        <p class="r-job-name" @click="gotoJobDetail(i.id,i)">{{i.name}}</p>
                        <div class="part-time job-type-btn" v-if="i.type == 2">兼职</div>
                        <div class="un-job job-type-btn" v-if="i.type == 3">实习</div>
                        <p class="r-job-detail">
                            <span class="salary-perday">{{i.min}}-{{i.max}}{{i.salaryUnit}}/{{i.unitObj.name}} </span>
                            {{i.expObj.name}} | {{i.eduObj.name}}
                        </p>
                    </div>
                    <div class="right inline">
                        <div class="check-btn" @mouseover="checkOn(index)" @mouseout="checkOut()">立即沟通</div>
                        <p class="post-time">{{i.publishTime}} 发布</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {getCompanyDetail} from '../../api/getCompanyDetail'
export default {
    name:'recruiting',
    data() {
        return {
            ewmindex:-1,
            tabList:[],
            comId:'',
            jobList:[],
            tabIndex:0
        }
    },
    created() {
        this.getParams();
    },
    methods: {
        checkOn(index){
            this.ewmindex = index;
        },
        checkOut(){
            this.ewmindex = -1;
        },
        gotoJobDetail(id,i){
            //指定跳转地址
            // this.$router.replace('/jobDetail');
            this.$router.push({
                path:'/jobDetail',
                query: {
                    id:'',
                    inPageIndex:'',
                    poiCateId:i.nameObj.id,
                    salaryMin:i.min,
                    salaryMax:i.max,
                    poiName:i.name,
                    type:i.type,
                    areaId:i.addressObj.areaId,
                    eduId:i.eduObj.id,
                    expId:i.expObj.id,
                } 
            })
        },
        getParams(){
			this.comId = this.$route.query.comId;
            // alert(this.comId)
            getCompanyDetail(this.comId).then(res =>{
                console.log(res.data.data.allPoiList);
                this.jobList = res.data.data.allPoiList;
                this.tabList = res.data.data.poiGroup;
            })
		},
        tabPosition(pid,index){
            this.tabIndex = index;
            getCompanyDetail(this.comId,pid).then(res =>{
                // console.log(res.data.data);
                this.jobList = res.data.data.allPoiList;
            })
        }
    },
}
</script>
<style>
#recruiting{
    background-color: #F0F3F6;
    padding-left:368px;
    padding-bottom: 36px;
}

.hide{
    display: none !important;
}

#r-container{
    width: 884px;
}

.r-head{
    /* height: 112px; */
    background-color: white;
    padding: 22px 16px;
    box-sizing: border-box;
}

.r-head a{
    margin-right: 24px;
    /* margin-bottom: 36px; */
    display: inline-block;
    font-size: 14px;
    color: #646A7E;
}

.rheadactive {
  color: #3D7EFF !important;
}

#r-list .job-boxs{
    padding: 24px 16px;
    box-sizing: border-box;
    background-color: white;
    margin: 16px 0;
    position: relative;
}

#r-list .job-boxs .r-job-name{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px !important;
    display: inline-block;
}

#r-list .job-boxs .r-job-name:hover{
    color: #1958FB;
}

.job-type-btn{
    font-size: 12px;
    display: inline-block;
    text-align: center;
    line-height: 20px;
    margin-left: 12px;
    width: 32px;
    height: 20px;
    border-radius: 2px;
}

#r-list .job-boxs .part-time{
    border: 1px solid #FE9A2D;
    color: #FFA345;
}

#r-list .job-boxs .un-job{
    border: 1px solid #26D0C3;
    color: #00C2B3;
}

#r-list .job-boxs .r-job-detail{
    color: #646A7E;
    font-size: 14px;
}

#r-list .job-boxs .salary-perday{
    color: #FD7C50;
}

#r-list .job-boxs .check-btn{
    width: 93px;
    height: 32px;
    background: linear-gradient(132deg, #FF9F6E 0%, #FB734A 100%);
    border-radius: 2px;
    text-align: center;
    color: white;
    font-size: 12px;
    line-height: 32px;
}

#r-list .job-boxs .check-btn:hover{
    background: linear-gradient(132deg, #FFB18A 0%, #FC8F6F 100%);
}

#r-list .job-boxs .post-time{
    color: #99A0AB;
    font-size: 14px;
    margin-top: 12px;
}

#r-list .job-boxs .check-ewm-box{
    position: absolute;
    top: 66px;
    left: 724px;
    box-shadow: 0px 2px 8px 0px rgba(67, 72, 81, 0.15);
    background-color: white;
    border-radius: 6px;
    z-index: 1000;
}

#r-list .job-boxs .check-ewm-box .check-ewm{
    position: relative;
    padding: 10px;
    box-sizing: border-box;
}

#r-list .job-boxs .check-ewm-box .check-ewm div{
    width: 144px;
    height: 146px;
    background-color: white;
}

#r-list .job-boxs .check-ewm-box .check-ewm img{
    width: 10px;
    position: absolute;
    top: 10px;
    left: 10px;
}

#r-list .job-boxs .check-ewm-box .check-ewm .ewm{
    width: 124px;
    height: 124px;
    background-color: #E3E6EA;
}
</style>